<template>
  <div class="store-shelf">
    <shelf-title :ifShowBack="true" :title="shelfCategory.title" class="store-title"></shelf-title>
    <scroll
      class="store-shelf-scroll-wrapper"
      :top="0"
      :bottom="ScrollButton"
      @onScroll="onScroll"
      ref="scroll"
    >
      <shelf-list :top="42" :data="shelfCategory.itemList"></shelf-list>
    </scroll>
    <shelf-footer></shelf-footer>
    <div class="store-shelf-bg" v-if="Storebackground">
      <span class="store-shelf-bg-text">当前分组无书籍</span>
    </div>
  </div>
</template>

<script>
import shelfFooter from '../../components/shelf/shelfFooter.vue'
import shelfTitle from '../../components/shelf/shelfTitle.vue'
import { storeShelfMixin } from '../../utils/mixin'
import Scroll from '../../components/common/Scroll.vue'
import shelfList from '../../components/shelf/shelfList.vue'
export default {
  mixins: [storeShelfMixin],
  data() {
    return {
      ScrollButton: 0
    }
  },
  computed: {
    Storebackground() {
      return this.shelfCategory.itemList.length === 0
    }
  },
  watch: {
    // 处于编辑模式时 将scrllo 的 button 设置为 48
    isEditMode(EditMode) {
      this.ScrollButton = EditMode ? 48 : 0
      // 这里不能立即调用refresh方法 因为会触发一些dom
      // 需要dom完成之后再调用
      this.$nextTick(() => {
        this.$refs.scroll.refresh()
      })
    }
  },
  components: {
    shelfTitle,
    Scroll,
    shelfList,
    shelfFooter
  },
  methods: {
    onScroll(offsetY) {
      this.setOffsetY(offsetY)
    }
  },
  mounted() {
    this.getCategoryList(this.$route.query.title)
    this.setCurrentType(2)
  }
}
</script>
<style lang='scss' scopde>
@import '../../assets/style/global.scss';
.store-shelf {
  position: relative;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: white;
  .store-shelf-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:whitesmoke;
    @include center;
    .store-shelf-bg-text {
      font-size: px2rem(20);
      color: #333333;
    }
  }
  .store-shelf-scroll-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 101;
  }
}
</style>
